<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">

</head>

<script type="text/javascript">
    $(".ui.dropdown").dropdown();
</script>

<!--导航-->
<nav th:replace="admin/_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>博客</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>个人主页</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown  item">
                    <img class="ui avatar image" src="https://img1.imgtp.com/2023/08/11/66nI4otp.jpg" th:src="@{${session.user.avatar}}">
                    <span th:text="${session.user.nickname}">专业团队</span>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                        <a href="#" th:href="@{/update}" class="item">修改个人信息</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<body>

<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">

                <h2 class="ui teal image header" >
                    <div class="content">
                        修改个人信息
                    </div>
                </h2>

                <form class="ui large form" method="post" action="#" th:action="@{/doupdate}" enctype="multipart/form-data">
                    <div class="ui  segment">
                        <!--上传头像-->
                        <div class="green-bold">请上传您的头像</div>
                        <div>
                            <span><img th:each="fileName : ${fileNames}" th:src="${fileName}" width="90" height="90"/></span>
                        </div>
                        <input type="file" name="fileName" value="选择头像">
                        <div class="field">
                            <br>
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" th:placeholder="@{${session.user.nickname}}">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="email" th:placeholder="@{${session.user.email}}">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">



                                <i class="lock icon"></i>
                                <input type="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password2" placeholder="请确认您的密码">
                            </div>
                        </div>
                        <button class="ui fluid large teal submit button">保   存</button>
                    </div>

                    <div class="ui error mini message"></div>
                    <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">请输入您的信息</div>

                </form>

            </div>
        </div>
    </div>
</div>
</form>

<script type="text/javascript">
    $(".ui.dropdown").dropdown();
</script>

<!--点击特效Begin-->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("(๑◕ܫ￩๑)b","╮(๑•́ ₃•̀๑)╭"," (｡◕ฺˇε ˇ◕ฺ｡）","(ฅ′ω`ฅ)","♪（＾∀＾●）ﾉｼ","  ˶⚈Ɛ⚈˵ ",
                " (╬￣皿￣)凸","ʅ（′◔౪◔）ʃ","ヾ(o◕∀◕)ﾉ ","♥(｡￫v￩｡)♥");

            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 16, // 字体大小
                x = event.clientX - f / 2, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 1.2; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)

        }
        // 随机颜色
        function randomColor() {

            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";

        }
    }());
</script>
<!--点击特效End-->
</body>
</html>
